<template>
  <view class="chatbox">
    <comtarbar class="comtarbar">
      <template #center>
        <view class="title">
          <view>{{ getName }}</view>
          <view v-if="type == 'group' && getGroupInfo.user_list">（ {{ getGroupInfo.user_list.length }} ）</view>
        </view>
      </template>
      <template #right>
        <view v-if="type == 'group'" class="info" @tap="goGroupInfo"><image src="../../static/images/userhome/more.png" mode="widthFix"></image></view>
      </template>
    </comtarbar>
    <view class="messagebox" :animation="animationData" :style="{ height: scrollHeight + 'px' }">
      <my-progress v-if="record" :duration="maxDuration"></my-progress>
      <view class="new_message" v-if="getNewMsgCount > 0 && !isBottom" @tap="goBottom">
        <view>
          <image src="../../static/images/chat/newMessage3.png" mode="widthFix"></image>
          <view class="number">{{ getNewMsgCount }}</view>
        </view>
      </view>
      <scroll-view scroll-y="true" @scroll="scrollHandler" class="scroll-Y" show-scrollbar="true" :scroll-top="contentHeight">
        <!-- 私聊 -->
        <view class="contentbox" v-if="type == 'private' && getChatHistory.toUser">
          <view class="loadbox" v-if="getIsLoading"><image src="../../static/images/chat/loading.gif" mode="widthFix"></image></view>
          <view class="morebtn" v-if="!getIsLoading && getChatCount > chat_limit" @tap="loadMore">点击加载更多</view>
          <template v-for="(item, index) in getChatHistory.msg_list">
            <view class="othermsg" v-if="item.belong != getUser._id" :key="index">
              <view class="o_imgbox" @tap="goInfo(getChatHistory.toUser._id)">
                <image :src="getChatHistory.toUser.avatars ? getChatHistory.toUser.avatars : ''" mode="aspectFill"></image>
              </view>
              <rich-text class="o_msgbox" v-if="item.type == 'text'" :nodes="item.message"></rich-text>
              <view class="o_msgbox o_msgimg" v-else-if="item.type == 'image'">
                <view><image @load="loadImg" lazy-load class="chat_img" @tap="previewImage" :data-img="item.img" :src="item.message" mode="widthFix"></image></view>
              </view>
              <view
                  class="o_msgbox o_sound"
                  :id="'sound' + index"
                  @tap="palySound(item, 'sound' + index)"
                  :style="{ width: (item.duration / maxDuration) * 360 + 'rpx' }"
                  v-else-if="item.type == 'voice'"
              >
                <view class="sound_box"><image :src="soundId == 'sound' + index ? playingImg : playImg" mode="widthFix"></image></view>
                <view class="sound_time">{{ item.duration }} s</view>
              </view>
              <!-- 位置信息 -->
              <view class="o_msgbox  o_location" v-else-if="item.type == 'location'">
                <view class="ol_name">{{ item.message.address }}</view>
                <map
                    style="width: 50vw; height:260rpx;"
                    :latitude="item.message.latitude"
                    :longitude="item.message.longitude"
                    :markers="[{ latitude: item.message.latitude, longitude: item.message.longitude, iconPath: '../../static/images/chat/location.png' }]"
                ></map>
                <view class="o_mask" @tap="openLocation(item.message)"></view>
              </view>
            </view>
            <view class="mymsg" v-else :key="index">
              <view class="m_imgbox" @tap="goInfo(getChatHistory.fromUser._id)">
                <image lazy-load :src="getChatHistory.fromUser.avatars ? getChatHistory.fromUser.avatars : ''" mode="aspectFill"></image>
              </view>
              <!-- 文字信息 -->
              <rich-text class="m_msgbox" v-if="item.type == 'text'" :nodes="item.message"></rich-text>
              <!-- 图片信息 -->
              <view class="m_msgbox m_msgimg" v-else-if="item.type == 'image'">
                <view><image @load="loadImg" class="chat_img" lazy-load @tap="previewImage" :data-img="item.img" :src="item.message" mode="widthFix"></image></view>
              </view>
              <!-- 语音信息 -->
              <view
                  class="m_msgbox m_sound"
                  :id="'sound' + index"
                  @tap="palySound(item, 'sound' + index)"
                  :style="{ width: (item.duration / maxDuration) * 360 + 'rpx' }"
                  v-else-if="item.type == 'voice'"
              >
                <view class="sound_box"><image :src="soundId == 'sound' + index ? playingImg : playImg" mode="widthFix"></image></view>
                <view class="sound_time">{{ item.duration }} s</view>
              </view>
              <!-- 位置信息 -->
              <view class="m_msgbox  m_location" v-else-if="item.type == 'location'">
                <view class="ml_name">{{ item.message.address }}</view>
                <map
                    style="width: 50vw; height:260rpx;"
                    :latitude="item.message.latitude"
                    :longitude="item.message.longitude"
                    :markers="[{ latitude: item.message.latitude, longitude: item.message.longitude, iconPath: '../../static/images/chat/location.png' }]"
                ></map>
                <view class="m_mask" @tap="openLocation(item.message)"></view>
              </view>
            </view>
            <view class="time" v-if="item.date != ''">{{ item.date | dateFormat }}</view>
          </template>
        </view>

        <!-- 群聊 -->
        <view class="contentbox" v-if="type == 'group' && getChatHistory.groupID">
          <view class="loadbox" v-if="getIsLoading"><image src="../../static/images/chat/loading.gif" mode="widthFix"></image></view>
          <view class="morebtn" v-if="!getIsLoading && getChatCount > chat_limit" @tap="loadMore">点击加载更多</view>
          <template v-for="(item, index) in getChatHistory.msg_list">
            <view class="othermsg" v-if="item.belong != getUser._id" :key="index">
              <view class="o_imgbox" @tap="goInfo(item.belong)"><image :src="item.user.avatars" mode="aspectFill"></image></view>
              <view class="msgbox">
                <view class="o_name">{{ item.user.name }}</view>
                <rich-text class="o_msgbox og_msgbox" v-if="item.type == 'text'" :nodes="item.message"></rich-text>
                <view class="o_msgbox og_msgbox o_msgimg" v-else-if="item.type == 'image'">
                  <view>
                    <image @load="loadImg" lazy-load class="chat_img" @tap="previewImage" :data-img="item.img" :src="item.message" mode="widthFix"></image>
                  </view>
                </view>
                <view
                    class="o_msgbox og_msgbox o_sound"
                    :id="'sound' + index"
                    @tap="palySound(item, 'sound' + index)"
                    :style="{ width: (item.duration / maxDuration) * 360 + 'rpx' }"
                    v-else-if="item.type == 'voice'"
                >
                  <view class="sound_box"><image :src="soundId == 'sound' + index ? playingImg : playImg" mode="widthFix"></image></view>
                  <view class="sound_time">{{ item.duration }} s</view>
                </view>
                <!-- 位置信息 -->
                <view class="o_msgbox og_msgbox  o_location" v-else-if="item.type == 'location'">
                  <view class="ol_name">{{ item.message.address }}</view>
                  <map
                      style="width: 50vw; height:260rpx;"
                      :latitude="item.message.latitude"
                      :longitude="item.message.longitude"
                      :markers="[{ latitude: item.message.latitude, longitude: item.message.longitude, iconPath: '../../static/images/chat/location.png' }]"
                  ></map>
                  <view class="o_mask" @tap="openLocation(item.message)"></view>
                </view>
              </view>
            </view>
            <view class="mymsg" v-else :key="index">
              <view class="m_imgbox" @tap="goInfo(item.belong)"><image lazy-load :src="item.user.avatars" mode="aspectFill"></image></view>
              <view class="msgbox">
                <!-- <view class="m_name">{{ item.user.name }}</view> -->
                <rich-text class="m_msgbox mg_msgbox" v-if="item.type == 'text'" :nodes="item.message"></rich-text>
                <view class="m_msgbox m_msgimg mg_msgbox" v-else-if="item.type == 'image'">
                  <view>
                    <image @load="loadImg" class="chat_img" lazy-load @tap="previewImage" :data-img="item.img" :src="item.message" mode="widthFix"></image>
                  </view>
                </view>
                <view
                    class="m_msgbox m_sound mg_msgbox"
                    :id="'sound' + index"
                    @tap="palySound(item, 'sound' + index)"
                    :style="{ width: (item.duration / maxDuration) * 360 + 'rpx' }"
                    v-else-if="item.type == 'voice'"
                >
                  <view class="sound_box"><image :src="soundId == 'sound' + index ? playingImg : playImg" mode="widthFix"></image></view>
                  <view class="sound_time">{{ item.duration }} s</view>
                </view>
                <!-- 位置信息 -->
                <view class="m_msgbox  m_location mg_msgbox" v-else-if="item.type == 'location'">
                  <view class="ml_name">{{ item.message.address }}</view>
                  <map
                      style="width: 50vw; height:260rpx;"
                      :latitude="item.message.latitude"
                      :longitude="item.message.longitude"
                      :markers="[{ latitude: item.message.latitude, longitude: item.message.longitude, iconPath: '../../static/images/chat/location.png' }]"
                  ></map>
                  <view class="m_mask" @tap="openLocation(item.message)"></view>
                </view>
              </view>
            </view>
            <view class="time" v-if="item.date != ''">{{ item.date | dateFormat }}</view>
          </template>
        </view>
      </scroll-view>
    </view>
    <submit @measure="measure" :chatType="type" :maxDuration="maxDuration" :id="id" class="submit" @record="recording"></submit>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../api/request.js';
import datas from '../../commons/js/datas.js';
import submit from '../../components/submit/submit.vue';
import MyProgress from '../../components/myprogress/myprogress.vue';
const innerAudioContext = uni.createInnerAudioContext();
export default {
  data() {
    return {
      id: '', //当前用户获取群聊的id
      type: '', //当前聊天的类型（群聊还是私聊）
      scrHeight: 0, //屏幕高度
      panelHeight: 0, //submit组件的高度
      ctbHeight: 0, // comtarbar组件的高度
      contentHeight: 0, //聊天区域的高度
      scrollHeight: 0, //滚动区域的视口高度
      animationData: {}, //聊天窗口的动画
      imgList: [], //图片预览数组
      Timer: null, //监听image加载时防抖函数使用的timer
      reTimer: null, //监听updated时防抖函数使用的timer
      chats: null, //真机测试时的聊天记录
      playImg: '/static/images/chat/audio2.png', //展示音频的img
      playingImg: '', //播放音频的是img
      soundId: '', //点击播放的音频id
      palyTimer: null, //监听录音播放结束的timer
      interval: null, //播放录音动画的interval
      record: false, //录音动画的显示与隐藏
      startTime: 0, //记录聊天的时间
      chat_page: 1, //聊天记录的页码
      chat_limit: 40, //每页展示的聊天记录的条数
      isBottom: true, //滚动条是否滚动到底部，默认是在底部，通过这个属性来控制滚动条是否自动滚动到底部
      maxDuration: 20 //最大录音长度
    };
  },
  onLoad(option) {
    // this.chats = datas.chats;
    this.id = option.id;
    this.type = option.type;
    if (this.type == 'group') {
      this.$store.dispatch('getInfo', this.id);
    }
    this.$store.commit('changeChatType', this.type);
    this.$store.commit('changeChatId', this.id);
    this.$store.dispatch('getChatHistory', { id: this.id, type: this.type, page: this.chat_page, limit: this.chat_limit });
  },
  mounted() {
    this.getHeight();
  },
  updated() {
    this.$nextTick(() => {
      if (this.contentHeight < this.scrHeight) {
        this.upDateDialog();
      } else if (this.getNewMsgCount > 0 && this.isBottom) {
        this.upDateDialog();
      }
    });
  },
  beforeDestroy() {
    // 关闭页面后，语音停止播放
    innerAudioContext.stop();
  },
  computed: {
    ...mapGetters(['getChatHistory', 'getChatCount', 'getName', 'getUser', 'getGroupInfo', 'getIsLoading', 'getNewMsgCount'])
  },
  components: {
    submit,
    MyProgress
  },
  watch: {
    // 监听聊天信息
    getChatHistory: {
      deep: true, //深度监听设置为 true
      handler(val, oldVal) {
        this.loadImg();
        this.imgList = [];
        this.$nextTick(() => {
          val.msg_list.map(item => {
            if (item.type == 'image') {
              //图片
              this.imgList.push(item.img);
            }
          });
        });
      }
    }
    // chats: function(val, oldVal) {
    // 	this.getHeight();
    // 	this.loadImg();
    // 	this.$nextTick(function() {
    // 		this.imgDom();
    // 	});
    // }
  },
  methods: {
    // 去用户详情页
    goInfo(id) {
      uni.navigateTo({
        url: '../information/information?id=' + id
      });
    },
    // 接收子组件submit传递过来的高度
    measure(height) {
      this.panelHeight = height;
      this.show();
    },
    // 窗口动画
    show() {
      var animation = uni.createAnimation({
        duration: 200,
        timingFunction: 'ease'
      });
      if (this.ctbHeight == 0) {
        //
        this.getHeight(); // 获取高度
        setTimeout(() => {
          // #ifdef APP-PLUS
          this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight - 28;
          // #endif
          // #ifdef H5
          this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight;
          // #endif
          animation.height(this.scrollHeight).step();
          this.animationData = animation.export();
          // 因为在执行动画时，contentHeight的值是没有变的，所以页面不会更新，需要手动改变一下contentHeight的值
          this.contentHeight = this.contentHeight - 3;
          setTimeout(() => {
            this.contentHeight = this.contentHeight + 3;
          }, 200);
        });
      } else {
        // #ifdef APP-PLUS
        this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight - 28;
        // #endif
        // #ifdef H5
        this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight;
        // #endif

        animation.height(this.scrollHeight).step();
        this.animationData = animation.export();
        // 因为在执行动画时，contentHeight的值是没有变的，所以页面不会更新，需要手动改变一下contentHeight的值
        this.contentHeight = this.contentHeight - 3;
        setTimeout(() => {
          this.contentHeight = this.contentHeight + 3;
        }, 200);
      }
    },
    // 监听滚动条的滚动
    scrollHandler(event) {
      let scroll = event.detail.scrollHeight - this.scrollHeight;
      if (event.detail.scrollTop < scroll - 80) {
        this.isBottom = false;
      } else {
        this.isBottom = true;
        if (this.getNewMsgCount > 0) {
          this.upDateDialog();
        }
      }
    },
    //获取元素的高度
    getHeight: function() {
      const query = uni.createSelectorQuery().in(this);
      // #ifdef APP-PLUS
      uni.getSystemInfo({
        success: res => {
          this.scrHeight = res.windowHeight;
          query
              .select('.comtarbar')
              .boundingClientRect(data => {
                this.ctbHeight = data.height;
                //聊天窗口的高度
                // this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight - 1200;
                this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight;
                // console.log('屏幕高度：', this.scrHeight);
                // console.log('tarbar高度：', this.ctbHeight);
                // console.log('submit高度：', this.panelHeight);
                // console.log('聊天窗口的高度：', this.scrollHeight);
                this.getContent();
              })
              .exec();
        }
      });
      // #endif

      // #ifdef H5
      setTimeout(() => {
        // 屏幕高度
        query
            .select('.chatbox')
            .boundingClientRect(data => {
              this.scrHeight = data.height;
            })
            .exec();
        // tarbar
        query
            .select('.comtarbar')
            .boundingClientRect(data => {
              this.ctbHeight = data.height;
            })
            .exec();
        // submit组件
        query
            .select('.submit')
            .boundingClientRect(data => {
              this.panelHeight = data.height;
            })
            .exec();
        //聊天窗口的高度
        this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight - 2;
      }, 400);
      // #endif
    },

    // 获取聊天区域的高度
    getContent() {
      const query = uni.createSelectorQuery().in(this);
      query
          .select('.contentbox')
          .boundingClientRect(data => {
            if (data) {
              this.contentHeight = data.height;
            }
          })
          .exec();
    },

    // 监听图片是否加载完成
    loadImg() {
      // 防抖
      // clearTimeout(this.Timer);
      // this.Timer = setTimeout(() => {
      // 	this.getContent();
      // }, 60);
      if (this.isBottom) {
        // 防抖
        clearTimeout(this.Timer);
        this.Timer = setTimeout(() => {
          this.getContent();
        }, 300);
      }
    },

    // 预览图片
    previewImage(e) {
      // 遍历找到当前img在imgList中的index值
      let index = this.imgList.findIndex(item => {
        return item == e.target.dataset.img;
      });
      uni.previewImage({
        urls: this.imgList,
        current: index,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(data) {
            // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function(err) {
            // console.log(err.errMsg);
          }
        }
      });
    },



    // 播放录音
    palySound(item, id) {
      clearInterval(this.interval);
      clearTimeout(this.palyTimer);
      let { message, duration } = item;
      console.log(message)
      if (message == '过期已删除') {
        uni.showToast({
          title:"录音已过期",
          icon:"none",
          duration:1000
        })
      } else {
        let index = 0;
        if (this.soundId == id) {
          innerAudioContext.stop();
          innerAudioContext.src = '';
          this.soundId = '';
          this.playingImg = '';
          index = 0;
        } else {
          this.soundId = id;
          innerAudioContext.src = message;
          innerAudioContext.play();
          this.interval = setInterval(() => {
            index++;
            this.playingImg = '/static/images/chat/audio' + (index % 3) + '.png';
          }, 400);
          this.palyTimer = setTimeout(() => {
            clearInterval(this.interval);
            clearTimeout(this.palyTimer);
            this.playingImg = '';
            this.soundId = '';
            index = 0;
          }, duration * 1000 + 100);
        }
      }
    },

    // 录音动画
    recording(value) {
      this.record = value;
    },

    // 转到群组详情页
    goGroupInfo() {
      uni.navigateTo({
        url: '../groupinfo/groupinfo?id=' + this.id
      });
    },
    // 打开位置信息
    openLocation(location) {
      uni.openLocation({
        latitude: location.latitude,
        longitude: location.longitude,
        success: function() {
          // console.log('success');
        }
      });
    },
    // 加载更多
    loadMore() {
      this.$store.commit('changeIsLoading');
      this.chat_page++;
      this.$store.dispatch('getChatHistory', { id: this.id, type: this.type, page: this.chat_page, limit: this.chat_limit });
    },
    // 滚动到底部
    goBottom() {
      // let scroll = this.contentHeight;
      // console.log(scroll)
      // this.contentHeight = this.contentHeight - 3;
      // console.log(this.contentHeight)
      // setTimeout(() => {
      // 	this.contentHeight = scroll;
      // 	console.log(this.contentHeight)

      // }, 0);
      this.isBottom = true;
      this.loadImg();
    },
    upDateDialog() {
      this.$nextTick(async () => {
        // 更新未读信息的数量
        let res = await request({
          url: '/dialogue/updateUnRead',
          data: {
            token: uni.getStorageSync('token'),
            id: this.id
          },
          method: 'POST'
        });
        this.$store.dispatch('getDialogue');
      });
    }
  }
};
</script>

<style lang="less">
//页面撑开头部样式
.content {
  padding-top: var(--status-bar-height);
}
.tb_solt {
  display: inline-block;
  font-weight: normal;
  height: 88rpx;
  line-height: 88rpx;
  box-sizing: border-box;
  padding-left: 30rpx;
}

.main {
  padding-top: 104rpx;
  padding-bottom: $uni-spacing-col-base;
  //border: 1px solid red;
}
.top-bar{
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  width: 100%;
  height: 88rpx;
  background: rgba(255, 255, 255, 1);
}
.tb_solt {
  height: 88rpx;
  line-height: 88rpx;
  padding-left: 26rpx;
}
//底部样式
.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  padding-top: 10rpx;
  padding-bottom: var(--status-bar-height);
  //background-color: rgba(255,255,255,0.96);
}

//btn1样式
.btn1 {
  text-align: center;
  line-height: 80rpx;
  font-size: $uni-font-size-lg;
  color: $uni-text-color;
  height: 80rpx;
  border-radius: $uni-border-radius-sm;
}
.comtarbar{
  position: fixed;
  top: var(--status-bar-height);
  right: 0;
  left: 0;
  height: 88rpx;
  z-index: 1001;
  .title {
    line-height: 88rpx;
    padding: 0rpx 20rpx;
    view{
      display: inline-block;
    }
  }
  .info {
    width: 60rpx;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 100%;
      height: auto;
    }
  }
}

.chatbox {
  box-sizing: border-box;
  padding-top: var(--status-bar-height);
  background: white;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .comtarbar {
    background: #f4f4f4;
    .info {
      margin-left: 30rpx;
    }
  }
  .loadbox {
    padding-top: 10rpx;
    height: 80rpx;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      opacity: 0.6;
      width: 60rpx;
      height: 60rpx;
    }
  }
  .morebtn {
    padding-top: 10rpx;
    height: 80rpx;
    width: 100vw;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    color: #ccc;
  }

  .messagebox {
    margin-top: 88rpx;
    background: white;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 10rpx;
    .new_message {
      position: absolute;
      width: 110rpx;
      height: 110rpx;
      bottom: 20rpx;
      right: 20rpx;
      z-index: 888;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 110rpx;
        height: 100%;
      }
      view {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .number {
          position: absolute;
          padding: 0rpx 10rpx;
          border-radius: 4rpx;
          background: #ffffff;
          top: 50%;
          left: 50%;
          color: #1196d3;
          transform: translate(-50%, -50%);
          font-size: 26rpx;
        }
      }
    }
    .scroll-Y {
      height: 100%;

      .othermsg {
        width: 100%;
        padding: 0 20rpx;
        padding-top: 20rpx;
        padding-bottom: 10rpx;
        float: left;

        view {
          float: left;
        }
        .msgbox {
          max-width: 60%;
          position: relative;
        }
        .o_imgbox {
          width: 80rpx;
          height: 80rpx;
          overflow: hidden;
          border-radius: 10rpx;
          image {
            height: 100%;
            width: 100%;
          }
        }
        .o_name {
          display: inline-block;
          padding-left: 40rpx;
          height: 40rpx;
          width: 80%;
          font-size: 30rpx;
          line-height: 60rpx;
          color: rgba(25, 29, 35, 0.5);
          position: absolute;
          top: -20rpx;
          left: 0rpx;
        }
        .o_msgbox {
          float: left;
          margin-left: 40rpx;
          border-radius: 10rpx;
          padding: 16rpx 10rpx;
          max-width: 60%;
          background: #eeeeee;
          font-size: 28rpx;
          min-height: 40rpx;
          line-height: 40rpx;
          position: relative;
          div {
            display: inline-block !important;
          }
          image {
            display: inline-block !important;
          }
        }
        .og_msgbox {
          margin-top: 40rpx;
          max-width: 100%;
        }
        /* 箭头 */
        .o_msgbox:after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          left: -14rpx;
          top: 12px;
          border-top: solid 16rpx transparent;
          border-right: solid 16rpx #eeeeee;
          border-bottom: solid 16rpx transparent;
        }
        .o_msgimg {
          min-height: 70rpx;
          padding: 10rpx !important;
          view {
            width: 300rpx;
            max-height: 400rpx;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            image {
              width: 300rpx;
              height: auto;
            }
          }
        }
        .o_sound {
          min-width: 90rpx;
          font-size: 26rpx;
          // width: 260rpx;
          height: 60rpx;
          display: flex;
          // flex-direction: row-reverse;
          .sound_box {
            display: flex;
            align-items: center;
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
          .sound_time {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-left: 10rpx;
          }
        }
        .o_location {
          z-index: 20;
          height: 310rpx;
          width: 50vw;
          position: relative;
          .ol_name {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          map {
            position: absolute;
            top: 64rpx;
            left: 10rpx;
            display: inline-block;
          }
          .o_mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            // background: rgba(0,0,0,.2);
          }
        }
      }
      .mymsg {
        width: 100%;
        padding: 0 20rpx;
        padding-top: 20rpx;
        padding-bottom: 10rpx;
        float: right;
        view {
          float: right;
        }
        .msgbox {
          max-width: 60%;
          position: relative;
        }
        .m_imgbox {
          width: 80rpx;
          height: 80rpx;
          overflow: hidden;
          border-radius: 10rpx;
          image {
            height: 100%;
            width: 100%;
          }
        }
        .m_name {
          position: absolute;
          display: inline-block;
          font-size: 30rpx;
          width: 100%;
          color: rgba(25, 29, 35, 0.5);
          padding-right: 40rpx;
          right: 0rpx;
          text-align: right;
          top: -6rpx;
        }
        .m_msgbox {
          float: right;
          margin-right: 40rpx;
          border-radius: 10rpx;
          padding: 16rpx 10rpx;
          max-width: 60%;
          background: #9eea6a;
          font-size: 30rpx;
          min-height: 40rpx;
          line-height: 40rpx;
          position: relative;
        }
        .mg_msgbox {
          max-width: 100%;
        }
        /* 箭头 */
        .m_msgbox:after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          right: -14rpx;
          top: 12px;
          border-top: solid 16rpx transparent;
          border-left: solid 16rpx #9eea6a; /* 黑色大三角形 */
          border-bottom: solid 16rpx transparent;
        }
        .m_msgimg {
          min-height: 70rpx;
          padding: 10rpx !important;
          view {
            width: 300rpx;
            max-height: 400rpx;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            image {
              width: 300rpx;
              height: auto;
            }
          }
        }
        .m_sound {
          min-width: 90rpx;
          font-size: 26rpx;
          // width: 260rpx;
          height: 60rpx;
          display: flex;
          flex-direction: row-reverse;
          .sound_box {
            display: flex;
            align-items: center;
            transform: rotate(180deg);
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
          .sound_time {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10rpx;
          }
        }
        .m_location {
          height: 310rpx;
          width: 50vw;
          position: relative;
          z-index: 20;
          .ml_name {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          map {
            position: absolute;
            top: 64rpx;
            left: 10rpx;
            display: inline-block;
          }
          .m_mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            // background: rgba(0,0,0,.2);
          }
        }
      }
    }
  }
}
.time {
  width: 100vw;
  text-align: center;
  font-size: 24rpx;
  line-height: 60rpx;
  color: rgba(25, 29, 35, 0.5);
}
.contentbox {
  display: inline-block;
  width: 100vw;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}

/deep/ .rich-text {
  div {
    display: inline-block !important;
    vertical-align: bottom;
  }
  img {
    display: inline-block !important;
    vertical-align: bottom;
  }
}
</style>
